<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test</title>
</head>
<body>
<div id="app">
  <input
    id="time-and-date-ex"
    type="text"
    placeholder="27/10/2016 23:15"
    v-mask="'##/##/#### ##:##'"
    v-model="models.timeAndDate"
  />
  <hr>
  <input
    id="time-ex"
    type="text"
    placeholder="11:23:15"
    v-mask="'##:##:##'"
    v-model="models.timeWithSeconds"
  />
  <hr>
  <input
    id="hours-and-minutes-ex"
    type="text"
    placeholder="12h15m"
    v-mask="'##h##m'"
    v-model="models.hoursAndMinutes"
  />
  <hr>
  <input
    id="credit-cart-ex"
    type="text"
    placeholder="4444 4444 4444 4444"
    v-mask="'#### #### #### ####'"
    v-model="models.cardNumber"
  />
  <hr>
  <input
    id="phone-number-ex"
    type="text"
    placeholder="(999) 999-9999"
    v-mask="'(###) ###-####'"
    v-model="models.phoneNumber"
  />
  <hr>
  <input
    id="us-phone-number-ex"
    type="text"
    placeholder="+1(999)-999-9999"
    v-mask="'+1(###)-###-####'"
    v-model="models.usPhoneNumber"
  />
  <hr>
  <input
    id="cpf-ex"
    type="text"
    placeholder="123.123.123-12"
    v-mask="'###.###.###-##'"
    v-model="models.cpf"
  />
  <hr>
  <input
    id="cpnj-ex"
    type="text"
    placeholder="53.288.196/0001-28"
    v-mask="'##.###.###/####-##'"
    v-model="models.cpnj"
  />
  <hr>
  <input
    id="social-security-number-ex"
    type="text"
    placeholder="365-03-8704"
    v-mask="'###-##-####'"
    v-model="models.socialSecurityNumber"
  />
  <hr>
  <input
    id="time-range-ex"
    type="text"
    placeholder="00:00-23:59"
    v-mask="timeRangeMask"
    v-model="models.timeRange"
  />
  <hr>
  <input
    id="currency"
    type="text"
    placeholder="$1,000"
    v-mask="currencyMask"
    v-model="models.currency"
  />
  <hr>
  <input
    id="empty-mask"
    type="text"
    placeholder="anything"
    v-mask="false"
    v-model="models.emptyMask"
  />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/text-mask-addons@3.8.0/dist/textMaskAddons.min.js"></script>
<script src="../../../dist/v-mask.min.js"></script>
<script>
  function timeMask(value) {
    const hours = [
      /[0-2]/,
      value.charAt(0) === '2' ? /[0-3]/ : /[0-9]/,
    ];
    const minutes = [/[0-5]/, /[0-9]/];
    return value.length > 2
      ? [...hours, ':', ...minutes]
      : hours;
  }

  Vue.use(VueMask.VueMaskPlugin);

  new Vue({
    el: '#app',
    data: function () {
      return {
        models: {
          timeAndDate: '',
          timeWithSeconds: '',
          hoursAndMinutes: '',
          cardNumber: '',
          phoneNumber: '',
          usPhoneNumber: '',
          cpf: '',
          cpnj: '',
          socialSecurityNumber: '',
          timeRange: '',
          currency: '',
          emptyMask: ''
        }
      }
    },
    methods: {
      timeRangeMask(value) {
        const numbers = value.replace(/[^0-9]/g, '');
        if (numbers.length > 4) {
          return [...timeMask(numbers.substring(0, 4)), '-', ...timeMask(numbers.substring(4))];
        }
        return [...timeMask(numbers)];
      },
      currencyMask: textMaskAddons.createNumberMask()
    }
  })
</script>
</body>
</html>
